<template>
	<div class="goodsItem">
		<CustomDialog
			:title="state.dialog.title"
			v-model:visible="state.dialog.isShowDialog"
			dialogWidth="900px"
			@close="handleClose"
			:dialogFooterBtn="false"
		>
			<div class="review-container">
				<!-- 评价信息部分 -->
				<div class="info-section">
					<div class="left-section">
						<div class="info-item">
							<span class="label">用户昵称:</span>
							<span class="value">{{ state.data.nickname }}</span>
						</div>
						<div class="info-item">
							<span class="label">评价星级:</span>
							<div class="stars">
								<el-rate v-model="state.data.level" disabled />
							</div>
						</div>
						<div class="info-item">
							<span class="label">显示状态:</span>
							<div class="status-options">
								<el-radio-group v-model="state.data.showd" :disabled="true">
									<el-radio :label="1">正常</el-radio>
									<el-radio :label="0">隐藏</el-radio>
								</el-radio-group>
							</div>
						</div>
					</div>

					<div class="right-section">
						<div class="product-info">
							<div class="product-title">商品信息</div>
							<div class="product-content">
								<div class="vip-tag">
									<img :src="STATIC_URL + state.data.goodsImage" alt="VIP" class="vip-icon" />
								</div>
								<div class="product-details">
									<div class="product-name">{{ state.data.title }}</div>
									<div class="product-price">单价: {{ state.data.price }}×{{ state.data.quantity }}</div>
									<div class="product-specs">
										规格:
										<span v-for="(sku, index) in state.data.skus" :key="index"> {{ sku }}, </span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 评价记录部分 -->
				<div class="review-records">
					<div class="records-title-header">
						<div class="records-title">评价记录</div>
						<el-button type="text" @click="revertContent" v-if="state.showRevert">点击回复</el-button>
					</div>
					<div class="record-list">
						<div v-for="(record, index) in state.records" :key="index" class="record-item">
							<div class="user-avatar">
								<el-avatar :src="record.avatar" />
							</div>
							<div class="record-content">
								<div class="record-user">{{ record.nickname }}</div>
								<div class="record-time">{{ record.time }}</div>
								<div class="record-text">{{ record.content }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</CustomDialog>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { ElMessageBox } from 'element-plus';
import { goodsCommentApi } from '/@/api/goods/comment/index';
import messageUtils from '/@/utils/messageUtils';
import { STATIC_URL } from '/@/utils/config';
import _ from 'lodash';
const state = reactive({
	catalogData: [] as any,
	data: {
		id: '',
		content: '',
		images: [],
		level: 5,
		username: '',
		nickname: '',
		goodsId: '',
		goodsImage: '',
		skus: '',
		price: '',
		quantity: '',
		showd: 1,
		avatar: '',
		title: '',
		revertContent: '',
		createTime: '',
	},
	records: [] as any[],
	showRevert: true,
	dialog: {
		isShowDialog: false,
		title: '评价详情',
	},
});
const handleClose = () => {
	state.dialog.isShowDialog = false;
};

const view = async (id: any) => {
	try {
		state.records = [];
		state.data.id = id;
		const { data, code } = await goodsCommentApi().view(id);
		if (code != '0') {
			messageUtils().error('查询信息失败，请稍后重试');
		} else {
			state.data = data;
			resolveRevertContent(data);
		}
	} catch (e) {
		messageUtils().error('查询信息失败，请稍后重试');
	}
};

const resolveRevertContent = (data: any) => {
	state.records.push({
		avatar: data.avatar,
		nickname: data.nickname,
		time: data.createTime,
		content: data.content,
	});
	if (!_.isEmpty(state.data.revertContent)) {
		state.showRevert = false;
		state.records.push({
			avatar: data.revertAvatar,
			nickname: data.revertUsername,
			time: data.revertTime,
			content: data.revertContent,
		});
	}
};

const onOpen = async (id: any) => {
	view(id);
	state.dialog.isShowDialog = true;
};

const revertContent = async () => {
	ElMessageBox.prompt('请输入回复内容', '回复', {
		confirmButtonText: '确认',
	})
		.then(async ({ value }) => {
			console.log('value： ', value);
			const { code } = await goodsCommentApi().revert({
				id: state.data.id,
				revertContent: value,
			});
			if (code == '0') {
				messageUtils().success('操作成功');
				view(state.data.id);
			} else {
				messageUtils().error('操作失败,请稍后重试');
			}
		})
		.catch(() => {});
};

defineExpose({ onOpen });
</script>

<style scoped lang="scss">
.review-dialog :deep(.el-dialog__header) {
	border-bottom: 1px solid #eee;
	padding: 15px 20px;
}

.review-container {
	padding: 20px;
}

.info-section {
	display: flex;
	margin-bottom: 30px;
}

.left-section {
	flex: 1;
}

.right-section {
	flex: 1;
	border-left: 1px solid #eee;
	padding-left: 20px;
}

.info-item {
	margin-bottom: 15px;
	display: flex;
	align-items: center;
}

.label {
	width: 80px;
	color: #606266;
}

.value {
	font-weight: 500;
}

.product-info {
	// background-color: #f8f8f8;
	border-radius: 4px;
	padding: 15px;
}

.product-title {
	font-weight: bold;
	margin-bottom: 15px;
	color: #303133;
}

.product-content {
	display: flex;
}

.vip-icon {
	width: 50px;
	height: 50px;
	margin-right: 15px;
}

.product-name {
	font-weight: 500;
	margin-bottom: 5px;
}

.product-price,
.product-specs {
	color: #606266;
	font-size: 14px;
	margin-bottom: 5px;
}

.review-records {
	border-top: 1px solid #eee;
	padding-top: 20px;
}

.records-title-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.records-title {
	font-weight: bold;
	//margin-bottom: 15px;
}

.record-item {
	display: flex;
	margin-bottom: 20px;
}

.user-avatar {
	margin-right: 15px;
}

.record-content {
	flex: 1;
}

.record-user {
	font-weight: 500;
}

.record-time {
	color: #909399;
	font-size: 12px;
	margin: 5px 0;
}

.record-text {
	background-color: #f8f8f8;
	padding: 10px;
	border-radius: 4px;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
}
</style>
